<template>
  <div class="nav-containner">
    <el-tabs type="border-card"  v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="工程配置" name="first">
        <div class="assetContent">
          <engineering-configuration ref="firstnum"></engineering-configuration>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全时段" name="second">
        <safe-time ref="secondnum"></safe-time>
      </el-tab-pane>
      <el-tab-pane label="联动配置" name="third">
        <linkage-equipment ref="thirdnum"></linkage-equipment>
      </el-tab-pane>
      <el-tab-pane label="发送策略" name="fourth">
        <sending-strategy ref="fourthnum"></sending-strategy>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import EngineeringConfiguration from './EngineeringConfiguration'
  import safeTime from '../safeTime/index'

  import alarmSendingPolicy from '../AlarmSendingPolicy/index'
  import linkageEquipment from '../linkageEquipment/index'
  import sendingStrategy from '../sendingStrategy/index'
  export default {
    components: {
      EngineeringConfiguration, safeTime, linkageEquipment, sendingStrategy, alarmSendingPolicy },
    data() {
      return {
        activeName: 'first'
      }
    },
    methods: {
      handleClick(tab, event) {
        if (this.activeName === 'first') {
          this.$refs.firstnum.engineData()
        } else if (this.activeName === 'second') {
          this.$refs.secondnum.getSafeList()
        } else if (this.activeName === 'third') {
          this.$refs.thirdnum.getLinkageList()
        } else if (this.activeName === 'fourth') {
          this.$refs.fourthnum.overSendingStrategy()
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.nav-containner{
  width: 100%;
  height: 50px;
  /deep/ .el-tabs__nav{
    margin-left: 0px;
    height: 50px;
  }
  /deep/ .el-tabs__item {
    padding: 0 20px;
    height: 52px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
  }
}
</style>
